<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加员工</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .sold {
            border: solid 1px;
            width: 100%;
        }
        
        .center {
            text-align: center;
        }
        
        .dbc {
            display: block;
            margin: 10px auto;
        }
        
        .di {
            display: inline;
        }
        
        th {
            border: solid 1px;
        }
        
        td {
            border: solid 1px;
        }
        
        caption {
            font-size: large;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="sold center">
            <caption>员工信息</caption>
            <th>员工 id</th>
            <th>部门 id</th>
            <th>员工姓名</th>
            <th>员工生日</th>
            <th>员工性别</th>
            <th>员工工资</th>
            <tr>
                <td><input type="text" class="di" v-model="emp.id"></td>
                <td><input type="text" disabled class="di" v-model="emp.deptId"></td>
                <td><input type="text" class="di" v-model="emp.name"></td>
                <td><input type="text" class="di" v-model="emp.birth"></td>
                <td><input type="text" class="di" v-model="emp.sex"></td>
                <td><input type="text" class="di" v-model="emp.salary"></td>
            </tr>
        </table>
        <input type="button" value="添加用户" class="center dbc" @click='addEmp'>
    </div>
    <script>
        const App = {
            data() {
                return {
                    emp: {
                        id: null,
                        name: null,
                        sex: null,
                        birth: null,
                        salary: null,
                        deptId: null,
                    },
                }
            },
            methods: {
                addEmp() {
                    console.log(this.emp);
                    axios.post('http://127.0.0.1:8080/Test/emp?did=' + this.emp.deptId, {
                            emp: this.emp
                        })
                        .then(({
                            data
                        }) => {
                            console.log(data);
                            if (data.code == 200) {
                                window.location = "emp.html?id=" + this.emp.deptId;
                            } else {
                                alert(data.data);
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                            alert(error.data);
                        });
                }
            },
            created() {
                this.emp.deptId = getQueryVariable('id');
                axios.get('http://127.0.0.1:8080/Test/emp?did=' + this.emp.deptId).then(({
                    data
                }) => {
                    console.log(data);
                    if (data.code != 200) {
                        alert(' 出现错误, code ' + data.code);
                    } else {
                        this.emps = data.data;
                    }
                }).catch(function(error) {
                    console.log(error);
                    alert('连接服务器失败! ');
                });
            }
        }

        Vue.createApp(App).mount('#app ')

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    </script>
</body>

</html>